(function () {
    var qizipoint =
        [{ "x": 75, "y": 100 }, { "x": 175, "y": 200 }, { "x": 275, "y": 300 },
        { "x": 75, "y": 450 }, { "x": 175, "y": 450 }, { "x": 275, "y": 450 },
        { "x": 75, "y": 800 }, { "x": 175, "y": 700 }, { "x": 275, "y": 600 },
        { "x": 425, "y": 800 }, { "x": 425, "y": 700 }, { "x": 425, "y": 600 },
        { "x": 775, "y": 800 }, { "x": 675, "y": 700 }, { "x": 575, "y": 600 },
        { "x": 775, "y": 450 }, { "x": 675, "y": 450 }, { "x": 575, "y": 450 },
        { "x": 775, "y": 100 }, { "x": 675, "y": 200 }, { "x": 575, "y": 300 },
        { "x": 425, "y": 100 }, { "x": 425, "y": 200 }, { "x": 425, "y": 300 }]

    var con = document.querySelector(".con")
    for (i = 0; i < qizipoint.length; i++) {
        //创建按钮
        var qi_point = document.createElement("div");
        qi_point.id = "qi_point" + i;
        qi_point.setAttribute("class", "qi_point");
        qi_point.setAttribute("click", "ture");
        qi_point.style.top = (qizipoint[i]["x"]) + "px";
        qi_point.style.left = qizipoint[i]["y"] + "px";
        con.appendChild(qi_point)
    }

    var linepoint = [
        { "x": 100, "y": 100, "x2": 300, "y2": 300 },
        { "x": 800, "y": 100, "x2": 600, "y2": 300 },
        { "x": 800, "y": 800, "x2": 600, "y2": 600 },
        { "x": 450, "y": 100, "x2": 450, "y2": 300 },
        { "x": 450, "y": 600, "x2": 450, "y2": 800 },
        { "x": 100, "y": 450, "x2": 300, "y2": 450 },
        { "x": 600, "y": 450, "x2": 800, "y2": 450 },
        { "x": 100, "y": 800, "x2": 300, "y2": 600 }]

    var rectpoint = [
        { "top": 100, "left": 100, "width": 700, "height": 700 },
        { "top": 200, "left": 200, "width": 500, "height": 500 },
        { "top": 300, "left": 300, "width": 300, "height": 300 }]


    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_qipan");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    // 打印一下，查看是否能够显示具体环境
    console.log(ctx);
    // 设置画笔
    ctx.lineWidth = 5;

    // 开始绘制
    ctx.beginPath();
    for (i = 0; i < rectpoint.length; i++) {
        ctx.strokeStyle = "green";
        ctx.strokeRect(rectpoint[i]["top"], rectpoint[i]["left"], rectpoint[i]["width"], rectpoint[i]["height"]);
    }
    for (i = 0; i < linepoint.length; i++) {
        //设置绘制起点
        ctx.moveTo(linepoint[i]["x"], linepoint[i]["y"]);
        //设置绘制下一个点
        ctx.lineTo(linepoint[i]["x2"], linepoint[i]["y2"]);
    }

    ctx.strokeStyle = "green";
    ctx.stroke();
    //结束绘制
    ctx.closePath();


})();
